CSS Horizontale navigatie opmaak

We passen de leerstof over klasse-selectoren en positioneren toe in een syntheseoefening. We gebruiken we de volgende CSS teschnieken:

klasse-selectoren
pseudo-klassen
afbeelding als achtergrond
zweven met float
position eigenschap
display eigenschap
pseudo-element

De opmaak van de navigatie op een webpagina is één van de belangrijkste zaken die je als webdevelopper moet leren.

Stappenplan

Video
Voorbeelden
Als voorbeeld gebruiken we de navigatieopmaakt van de website wiskundeinbrussel.be:

home-wiskundeinbrussel-website
We maken een wireframe die van toepassing is op onze website:

wireframe opmaak horizontale navigatie
Maak een map met de naam labo4 in de root webtechnologie.
Voeg een HTML bestand toe met de naam horizontal-nav.html.
Voeg de basis HTML structuur toe met EMMET: ! tab.
In het title element plaats je Webtechnologie horizontale navigatie.

HTML

De HTML structuur voor de navigatie:

<header>
    <!-- link met afbeelding als achtergrond -->
    <a href="/index.html"></a>
    <nav>
        <a href="/index.html">Index</a>
        <a href="#">Eindwerk</a>
        <a href="#">Contact</a>
    </nav>
</header>

We voegen de klassennamen toe om later in de CSS te gebruiken. We gebruiken klassen om HTML elementen meer specifiek te maken. Het is geen 'gewone' header maar een header waar navigatie in staat, een besturingspaneel. Het is geen gewone a maar een logo dat als link gebruikt wordt, enz.

<header class="control-panel">
    <!-- link met afbeelding als achtergrond -->
    <a class="logo" href="/index.html"></a>
    <nav class="horizontal-nav">
        <a href="/index.html">Index</a>
        <a href="#">Eindwerk</a>
        <a href="#">Contact</a>
    </nav>
</header>

CSS
1. Dit moeten we maken:
  
  CSS opmaak horizontale navigatie voorbeeld
2. Maak een submap in de map labo4 met de naam css.
3. Maak een css bestand met de naam horizontal-nav.css.
4. Link het css bestand in horizontal-nav.html.
```
<link href="css/horizontal-nav.css" rel="stylesheet" type="text/css" />
```
5. We beginnen met eigenschappen in te stellen die op alle HTML elementen van toepassing zijn. We gebruiken daarvoor de universele seletor:
```
* { margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
  }
```
  1. We willen zelf de controle houden over de instellingen voor de kantlijn en vulling (margin en padding). Voor alle elementen stellen we de padding en margin in op 0.
  2. Als we de hoogte en breedte instellen van HTML elementen willen we dat de vulling en het kader meegerekend wordt. We stellen dus alle elementen in op we border-box.
6. We gaan meten in % om de pagina responsief te maken. Percenten zijn altijd een percent van het ouder-element. We stellen de breedte en de hoogte van het html en body element in met %. In het body element geven we ook op welk lettertype we willen gebruiken:
```
html {
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    font-family: "Segoe UI", robotolight,  Verdana, Serif;
}
```
7. Het besturingspaneel neemt de hele breedte van het browservenster in en heeft 1rem witruimte rond de content. De meeteenheid rem verwijst naar de standaard corpsgrootte van het body element, standaard ingesteld op 16px:
```
.control-panel {
    height: 10%;
    width: 100%;
    padding: 1rem;
}
```
8. Het logo is een afbeelding waarop je kan klikken.
  1. De breedte en de hoogte geven we op in percenten van het ouder-element.
  2. We gebruiken de background-image, background-size en background-repeat eigenschappen.
  3. Met de float eigenschappen halen we de elementen die volgen op de afbeelding uit de natuurlijke flow en laten die rechts zweven.
  4. Een a element is een inline element. We maken er blok element door door de display eigenschap in te stellen op block.
```
.logo {
    display: block;
    height: 100%;
    width: 15%;
    background-image: url("https://intranet.ap.be/sites/default/files/inline-images/AP_logo_basis_rgb.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    float: left;
}
```
9. Het navigatie gedeelte, aangegeven door de klasse .horizontal-nav, Hoogte en breedte zijn opgegeven in percenten en we voegen bovenaan witruimte toe.
```
.horizontal-nav {
    width: 85%;
    height: 100%;
    padding: 1rem 0 0 0;
 }
```
10. Als de bezoeker over een item in de navigatie zweeft moet dit item onderlijnd worden.
  1. HTML
    We voegen daarvoor een element toe waarin de de onderstrepingslijn komt te staan:
```
<nav class="horizontal-nav">
    <a href="/index.html">Index<span class="nav-underline"></span></a>
    <a href="#">Eindwerk<span class="nav-underline"></span></a>
    <a href="#">Contact<span class="nav-underline"></span></a>
</nav>
```
  2. CSS
    1. Dat span element waarin de lijn wordt geplaatst moet uit de natuurlijke flow gehaald worden. Die moet niet na het a element komen maar er net onder worden getekend.
    2. Daarvoor stellen we de position eigenschap van het a element in relative.
```
 .horizontal-nav a {
    margin-left: 4rem;
    text-decoration: none;
    cursor: pointer;
    color:#E20513; /* AP rood */
    font-size: 1.4rem;
    position: relative;
}
```
    3. De position eigenschap van het span element met de onderstrepingslijn stellen we in op absolute. Het span element is een element die we bovenop het a element plaatsen. De onderstepringslijn is de onderste lijn van het kader en om het element dat er onder zit nog te kunnen zien maken we het transparent. We plaatsen het span element absoluut door de top en left eigenschap op 0 in te stellen. De onderstrepingslijn (border-bottom) moet alleen zichtbaar zijn wanneer de gebruiker over het item zweeft met de cursor. Dus zetten we de width hier op 0. Met de pseudo-klasse :hover maken we die even breed als het ouder-element (zie hieronder)
```
.nav-underline {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    border-bottom: #AD0F09 solid 3px; /* AP donker rood */
    width: 0;
    background: transparent;
    transition: width .2s ease, border-bottom .3s ease;
    text-align: center;
    height: 2rem;

}
```
      Met de transition eigenschap voegen we eenvoudige animatie toe.
    4. Als de gebruiker over het item zweeft moet de border-bottom zichtbaar worden gemaakt door de width even groot te maken als het ouder-element:
```
a:hover .nav-underline {
    width: 100%;
}
```
  3. In plaats van een span element te gebruiken zouden we ook het pseudo-element ::after kunnen gebruiken. Elk HTML heeft een ::before en ::after pseudo element. Het span element kunnen we vervangen door het ::after pseudo-element. Dat maakt de HTML eenvoudiger.
    1. HTML
```
<header class="control-panel">
    
    <a class="logo" href="/index.html"></a>
    <nav class="horizontal-nav">
        <a href="/index.html">Index</span></a>
        <a href="#">Eindwerk</span></a>
        <a href="#">Contact</span></a>
    </nav>
</header>
```
    2. CSS
```
.horizontal-nav a::after {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    border-bottom: #AD0F09 solid 3px; /* AP donker rood */
    width: 0;
    background: transparent;
    transition: width .2s ease, border-bottom .3s ease;
    text-align: center;
    height: 2rem;
}

.horizontal-nav a:hover::after {
    width: 100%;
}
```

2020-10-12 13:16:04